<div [hidden]="!(isApplicationInspectorActivated$ | async)" class="l-wrapper">
    <article class="l-date-range">
        <pp-timeline-command-group-container></pp-timeline-command-group-container>
        <pp-application-inspector-timeline-container></pp-application-inspector-timeline-container>
        <ng-container *ngIf="coverRangeElements$ | async">
            <div class="l-cover"></div>
        </ng-container>
    </article>
    <div class="l-main-contents">
        <div class="l-chart-option-area">
            <p class="l-guide-text">{{guideMessage$ | async}}</p>
            <pp-chart-layout-option-container></pp-chart-layout-option-container>
        </div>
        <div class="l-chart-group-wrap" #chartGroupWrapper>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_JVM_HEAP"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_JVM_NON_HEAP"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_JVM_CPU"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_SYSTEM_CPU"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_TPS"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_ACTIVE_REQUEST"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_RESPONSE_TIME"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_OPEN_FILE_DESCRIPTOR"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_TOTAL_THREAD"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_DIRECT_BUFFER_COUNT"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_DIRECT_BUFFER_MEMORY"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_MAPPED_BUFFER_COUNT"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_MAPPED_BUFFER_MEMORY"></pp-inspector-chart-container></div>
            <div class="l-chart-wrapper"><pp-application-data-source-chart-container></pp-application-data-source-chart-container></div>
        </div>
    </div>
</div>
<ng-container *ngIf="!(isApplicationInspectorActivated$ | async)">
    <pp-application-inspector-usage-guide-container></pp-application-inspector-usage-guide-container>
</ng-container>
